<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta http-equiv="Cache-Control" content="no-cache" />
    <title></title>
    <link rel="stylesheet" href="css/neat.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <style>
        html,body{
            width:100%;
            height: 100%;
        }
    </style>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                    };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>
<body style="overflow:hidden;">
    <div class="top-search"><input type="text" class="input" placeholder="Search by name"/></div>
    <div class="wrapper1">
        <ul class="sorts-list">
            <li>Shoes</li>
            <li>Bags</li>
            <li>T-Shirts</li>
            <li>Blazers</li>
            <li>Jumpers</li>
            <li>Sunglasses</li>
            <li>Shorts</li>
        </ul>
        <div class="wrapper-icons clearfix">
            <ul>
                <li><div><img src="img/person.png" alt="" class="person"/></div></li>
                <li><div><img src="img/bag.png" alt="" class="shopping-bag"/><span class="bag-num">3</span></div></li>
                <li><div><img src="img/exit.png" alt="" class="exit"/></div></li>
            </ul>
        </div>
    </div>
    <div class="wrapper2 tx" style="overflow:hidden;">
        <header>
            <div class="index-header" style="position:relative;top:0;">
                <div><i class="icon-menu"></i></div>
                <div><img src="img/logo.png" alt="" class="logo"/></div>
                <div class="other-icon">
                    <p><i class="icon-bag"></i><span class="bag-num">3</span></p>
                    <p><i class="icon-zoom"></i></p>
                </div>
            </div>
            <div class="section-top">
                <div class="sort-tab clearfix">
                    <ul class="clearfix">
                        <li class="active">T-Shirts</li>
                        <li>Shoes</li>
                        <li>Bags</li>
                        <li>Blazers</li>
                        <li>Jumpers</li>
                        <li>Sunglasses</li>
                        <li>Shorts</li>
                    </ul>
                </div>
                <div class="show-way">
                    <div>
                        <img src="img/range-gray.png" alt="" class="range-way gray"/>
                        <img src="img/range-black.png" alt="" class="range-way black"/>
                    </div>
                    <div>
                        <img src="img/rank-gray.png" alt="" class="rank-way gray"/>
                        <img src="img/rank-black.png" alt="" class="rank-way black"/>
                    </div>
                    <div class="active" id="row-way">
                        <img src="img/row-gray.png" alt="" class="row-way gray"/>
                        <img src="img/row-black.png" alt="" class="row-way black"/>
                    </div>
                    <div id="block-way">
                        <img src="img/block-gray.png" alt="" class="block-way gray"/>
                        <img src="img/block-black.png" alt="" class="block-way black"/>
                    </div>
                </div>
            </div>
        </header>
        <section class="con" style="top: 0;height: calc(100% - 6.2rem);">
            <div class="sort-tab-con row-way-con">
                <div>
                    <h5 class="pro-title">Pique Polo Shirt with Snap Buttons</h5>
                    <img src="img/propic01.png" alt="" class="pro-img"/>
                    <p class="pro-price">$90</p>
                </div>
                <div>
                    <h5 class="pro-title">Pique Polo Shirt with Snap Buttons</h5>
                    <img src="img/propic02.png" alt="" class="pro-img"/>
                    <p class="pro-price">$90</p>
                    <img src="img/new.png" alt="" class="event-icon"/>
                </div>
                <div>
                    <h5 class="pro-title">Pique Polo Shirt with Snap Buttons</h5>
                    <img src="img/goods01.png" alt="" class="pro-img"/>
                    <p class="pro-price">$90</p>
                </div>
                <div>
                    <h5 class="pro-title">Pique Polo Shirt with Snap Buttons</h5>
                    <img src="img/goods02.png" alt="" class="pro-img"/>
                    <p class="pro-price">$90</p>
                    <img src="img/new.png" alt="" class="event-icon"/>
                </div>
            </div>
        </section>
    </div>

    <script src="js/zepto.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/public.js"></script>
    <script src="js/goto.js"></script>
</body>
</html>